<template>
  <div>
    <v-card>
      <v-list two-line subheader>
        <v-subheader>
          <span class="title">所有登记报名</span>
          <v-spacer></v-spacer>
          <v-btn :to="{ name: 'registry-edit' }">新增表单</v-btn>
        </v-subheader>
        <template v-for="(item, index) in registries">
          <v-divider></v-divider>
          <v-list-tile :key="index" @click="registryDetailDialog = true">
            <v-list-tile-content>
              <v-list-tile-title v-html="item.title"></v-list-tile-title>
              <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-list-tile-action-text>{{ item.action }}</v-list-tile-action-text>
            </v-list-tile-action>
          </v-list-tile>
        </template>
      </v-list>
    </v-card>

    <v-dialog
      v-model="registryDetailDialog"
      fullscreen
      transition="dialog-bottom-transition"
      :overlay="false"
      scrollable
    >

      <v-card tile>
        <v-toolbar card dark color="primary">
          <v-btn icon @click.native="registryDetailDialog = false" dark>
            <v-icon>close</v-icon>
          </v-btn>
          <v-toolbar-title>{{ registryDetail.title }}</v-toolbar-title>
        </v-toolbar>
        <v-card-text>

          <!-- registry hint -->
          <v-layout>
            <v-flex>
              <v-card flat>
                <v-card-title primary-title>
                  <div>
                    <div>{{ registryDetail.hint.title }}</div>
                    <div style="color:darkgrey;margin-top:10px;" v-html="registryDetail.hint.subtitle"></div>
                  </div>
                </v-card-title>
              </v-card>
            </v-flex>
          </v-layout>
          <v-divider></v-divider>


          <v-container fluid>
            <v-layout row>
              <v-flex>
                <v-text-field
                  label="你所报名的赛事"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex>
                <v-text-field
                  label="参赛作品/参加项目名称"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex>
                <v-text-field
                  label="参赛队伍名称"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row style="margin-top:10px;">
              <v-flex>
                <div>参赛负责人信息</div>
              </v-flex>
            </v-layout>

            <div style="margin-top:10px;">
              <template>
                <v-data-table
                  :headers="registryDetail.table.headers"
                  :items="registryDetail.table.items"
                  hide-actions
                  class="elevation-1"
                >
                  <template slot="items" slot-scope="props">
                    <td>{{ props.item.name }}</td>
                    <td>{{ props.item.name }}</td>
                    <td>{{ props.item.studentNumber }}</td>
                    <td>{{ props.item.email }}</td>
                    <td>{{ props.item.phoneNumber }}</td>
                  </template>
                </v-data-table>
              </template>
            </div>

            <v-layout row style="margin-top:20px;">
              <v-flex>
                <div>参赛作品，材料以及要上交的材料</div>
                <v-btn color="primary" @click="handleUpload">上传文件</v-btn>
                <input style="display: none;" type="file" ref="assets" id="assets" multiple />
              </v-flex>
            </v-layout>

            <v-layout row>
              <v-flex>
                <v-text-field
                  label="如需要学院提供其他支持，请在此列入"
                  multi-line
                ></v-text-field>
              </v-flex>
            </v-layout>

            <v-layout row>
              <v-flex>
                <v-btn color="primary" @click="registryDetailDialog = false">提交</v-btn>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>

        <div style="flex: 1 1 auto;"/>
      </v-card>

    </v-dialog>

    <div class="text-xs-center" style="margin-top:25px;">
      <v-pagination :length="1" v-model="page"></v-pagination>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      registries: [
        { title: '年度十佳优秀班干部选拔民主竞选', subtitle: '已填写', action: '2017-07-09 11:38' },
        { title: '华南师范大学最优菜品评选参选登记', subtitle: '', action: '2017-07-09 11:38' },
        { title: '出游意愿地点登记', subtitle: '已填写', action: '2017-07-09 11:38' },
        { title: '医疗保险缺交补充登记', subtitle: '', action: '2017-07-09 11:38' },
        { title: '计算机学院学生竞赛参赛报名表', subtitle: '', action: '2017-07-09 11:38' },
        { title: '付邮奖学金参评表', subtitle: '', action: '2017-07-09 11:38' },
        { title: '食堂放开时间延长普遍性需求调研', subtitle: '', action: '2017-07-09 11:38' },
        { title: '华南师范大学毕业班出游报名表', subtitle: '已填写', action: '2017-07-09 11:38' },
        { title: '毕业派遣签字时间统计', subtitle: '', action: '2017-07-09 11:38' }
      ],
      registryDetail: {
        title: '计算机学院学生竞赛参赛报名表',
        hint: {
          title: '参赛报名须知',
          subtitle: '1. 校外举行的比赛，通常有多种报名渠道，但报名之后，请在本处进行登记<br>2. 如对本项工作有任何疑问，请联系学院团委科调部，或学院陈国球老师'
        },
        table: {
          headers: [
            { text: '信息', sortable: false, value: 'topLeftEmptyCell' },
            { text: '姓名', sortable: false, value: 'name' },
            { text: '学号', sortable: false, value: 'studentNumber' },
            { text: '邮箱', sortable: false, value: 'email' },
            { text: '电话', sortable: false, value: 'phoneNumber' }
          ],
          items: [
            {
              topLeftEmptyCell: '',
              name: '',
              studentNumber: '',
              email: '',
              phoneNumber: ''
            }
          ]
        }
      },
      page: 1,
      registryDetailDialog: false
    }
  },
  methods: {
    handleUpload() {
      document.getElementById('assets').click()
    }
  }
}
</script>

<style scoped>

</style>
